<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one
  ~ or more contributor license agreements.  See the NOTICE file
  ~ distributed with this work for additional information
  ~ regarding copyright ownership.  The ASF licenses this file
  ~ to you under the Apache License, Version 2.0 (the
  ~ "License"); you may not use this file except in compliance
  ~ with the License.  You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing,
  ~ software distributed under the License is distributed on an
  ~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  ~ KIND, either express or implied.  See the License for the
  ~ specific language governing permissions and limitations
  ~ under the License.
  -->

<section class="app" fxLayout="column" fxFill>
  <mat-toolbar
    *ngIf="headerEnabled"
    class="header mat-elevation-z7"
    color="primary"
  >
    <a mat-button routerLink="/">
      <img class="helix-logo" src="assets/logo.png" />
      <span class="helix-title">Helix</span>
    </a>
    <span fxFlex="1 1 auto"></span>
    <a mat-button (click)="login()">
      <mat-icon>person</mat-icon>
      {{ currentUser | async }}
    </a>
  </mat-toolbar>
  <mat-progress-bar
    *ngIf="isLoading"
    mode="indeterminate"
    [ngClass]="{ 'no-header': !headerEnabled }"
  ></mat-progress-bar>
  <section class="main-container" [ngClass]="{ 'no-header': !headerEnabled }">
    <router-outlet></router-outlet>
  </section>
  <section
    *ngIf="footerEnabled"
    class="footer mat-elevation-z7"
    fxLayout="row"
    fxLayoutAlign="center center"
  >
    <span>&copy; 2022 Helix. All rights reserved.</span>
  </section>
</section>
